<template>
  <footer>
    <ul>
      <router-link
        v-for="item in paths"
        :key="item.path"
        :to="item.path"
        custom
        v-slot="{ navigate, isActive }"
      >
        <li :class="{ active: isActive }" @click="navigate">
          <van-icon :name="item.icon" />
          <span>{{ item.name }}</span>
        </li>
      </router-link>
    </ul>
  </footer>
</template>

<script setup>
import { reactive } from 'vue'

const paths = reactive([
  { name: '电影', path: '/home', icon: 'play-circle-o' },
  { name: '影院', path: '/cinema', icon: 'video-o' },
  { name: '盲盒', path: '/blindbox', icon: 'gift-card-o' },
  { name: '我的', path: '/my', icon: 'manager-o' }
])
</script>

<style lang="less" scoped>
footer {
  height: 44px;
  background: #fff;
  border-top: 1px solid #eee;
  ul {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      &.active {
        color: #ee0a24;
      }
      .van-icon {
        font-size: 18px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>